<script setup lang="ts">
type TableItem = {
    requestUser: string,
    equipmentName: string,
    requestDate: string,
    count: number,
    pricePer: number,
    priceAll: number,
    reason: string
}
const table: TableItem[] = [
    {
        requestUser: '张三',
        equipmentName: '办公桌',
        requestDate: '2022-01-01',
        count: 1,
        pricePer: 200,
        priceAll: 200,
        reason: '办公室少一个桌'
    }, {
        requestUser: '李四',
        equipmentName: '办公椅',
        requestDate: '2022-01-01',
        count: 5,
        pricePer: 100,
        priceAll: 500,
        reason: '办公室旧办公椅缺了一条腿'
    }
]

const click = (category_name: string, count_amount: number, reason: string, show: boolean) => {
    form.category = category_name
    form.count = count_amount
    form.reason = reason
    show_dialog.value = show
}

const show_dialog = ref(false)
const form = reactive({
    category: '',
    count: 0,
    reason: ''
})

const changeShow = (value: boolean) => {
    show_dialog.value = value
}
</script>

<template>
    <div>
        <el-table :data="table">
            <el-table-column prop="requestUser" label="申请人"></el-table-column>
            <el-table-column prop="equipmentName" label="资产名称"></el-table-column>
            <el-table-column prop="requestDate" label="申请日期"></el-table-column>
            <el-table-column prop="count" label="购买数量" sortable></el-table-column>
            <el-table-column prop="pricePer" label="单价" sortable></el-table-column>
            <el-table-column prop="priceAll" label="总价" sortable></el-table-column>
            <el-table-column prop="reason" label="申请原因"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button text type="primary"
                        @click="click(scope.row.equipmentName, scope.row.count, scope.row.reason, true)">审批</el-button>
                </template>
            </el-table-column>
        </el-table>

        <PurchaseApprove :category="form.category" :count="form.count" :reason="form.reason" :visible="show_dialog"
            @update:visible="changeShow">
        </PurchaseApprove>
    </div>
</template>